<template>
  <div
    id="hr-echarts2"
    style="width: 100%; height: 100%; pointer-events: all"
  ></div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get("/humanresources/getBusiness").then((res) => {
        this.renderEcharts(res.data);
      });
    },
    // 渲染柱形图
    renderEcharts(data) {
      let arr_name = [],
        arr_value = [];
      data.map((item) => {
        arr_name.push(item.name);
        arr_value.push(item.value);
      });
      let myChart = this.$echarts.init(document.getElementById("hr-echarts2"));

      let option = {
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: "20%",
          top: "2%", // 设置条形图的边距
          right: "8%",
          bottom: "4%",
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: data,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],
        series: [
          {
            // 内
            type: "bar",
            barWidth: 13,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              normal: {
                borderRadius: [4, 4, 4, 4],
                color: function (params) {
                  var color = {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#3EACE5", // 0% 处的颜色#956FD4 #3EACE5
                      },
                      {
                        offset: 1,
                        color: "#956FD4", // 100% 处的颜色
                      },
                    ],
                  };
                  return color;
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "left",
                formatter: "{b}",
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: data,
            z: 1,
            animationEasing: "elasticOut",
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#333",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 6,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [2, 13],
            symbolPosition: "start",
            symbolOffset: [2, 0],
            data: data,
            z: 2,
            animationEasing: "elasticOut",
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            itemStyle: {
              normal: {
                color: "none",
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  var text = "{f| " + params.data + "}";
                  return text;
                },
                rich: {
                  f: { color: "#ffffff" },
                },
                position: "right",
                show: true,
              },
            },
            data: arr_value,
            z: 0,
            animationEasing: "elasticOut",
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
